<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="@{'/public/javascripts/jquery-1.8.3.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <style>
            html, body{
                width:100%;
                height:100%;
                padding:0;
                margin:0;
            }
            svg{
                width:100%;
                height:100%;
                background:url('@{'/public/images/grid.gif'}');
            }
            table.class{
                font-family: Arial;
                font-size: 11px;
                background: white;
                border: 1px solid black;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                border-spacing: 0px;

            }
            table.class td{
                padding: 5px;
            }
            table.class tr.name td{
                border-bottom: 1px solid black;
                text-align: center;
                font-weight: bold;
            }
            table.class tr.attributes td{
                border-bottom: 1px solid black;
            }
            table.class tr td ul{
               padding:0;
               margin:0;
               list-style: none;
            }
            table.class tr td ul li{
                white-space:nowrap;
            }
        </style>
        <script type="text/javascript">
            var graph = {
                addClass: function(classDescriptor,x,y){
                    var fo = document.createElementNS("http://www.w3.org/2000/svg","foreignObject");
                    var clazz = $("<table></table").addClass("class");
                    var name = $("<tr></tr>").addClass("name").append($("<td></td>").text(classDescriptor.name));
                    var attributes = $("<tr></tr>").addClass("attributes").append($("<td></td>").append($("<ul></ul>")));
                    var methods = $("<tr></tr>").addClass("methods").append($("<td></td>").append($("<ul></ul>")));
                    $(classDescriptor.attributes).each(function(i,attribute){
                        $("ul",attributes).append($("<li></li>").text(attribute));
                    });
                    $(classDescriptor.methods).each(function(i,method){
                        $("ul",methods).append($("<li></li>").text(method));
                    });
                    clazz.append(name);
                    clazz.append(attributes);
                    clazz.append(methods);
                    $(fo).append(clazz);
                    fo.setAttributeNS(null,"position","absolute");
                    $("svg").append(fo);
                    fo.setAttributeNS(null,"width",clazz.outerWidth());
                    fo.setAttributeNS(null,"height",clazz.outerHeight());
                    fo.setAttributeNS(null,"x",x);
                    fo.setAttributeNS(null,"y",y);
                }
            }

            $(document).ready(function() {
                graph.addClass({
                    name:"People",
                    attributes:[
                        "+ id : Long",
                        "+ firstname : String"
                    ],
                    methods:[
                        "+ setName(String) : void"
                    ]
                },200,25);
                graph.addClass({
                    name:"Customer",
                    attributes:[
                        "+ id : Long",
                    ],
                    methods:[
                        "+ setName(String) : void"
                    ]
                },500,150);
        });
        </script>

    </head>
    <body >
    <svg  xmlns="http://www.w3.org/2000/svg" ></svg>
    </body>
</html>